@bg: #6eabff;
@primary: #356cdf;
@land-color: #9fc592;

@card-attack: #9b1b1b;
@card-special: #751b9b;
@card-support: #1b6e9b;

@victorious: #2a7db5;
@defeated: #b52a2a;

@world-ratio-raw: 1/1920;
@world-ratio: @world-ratio-raw*100vw;

@ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);

.h-box {
  display: flex;
  flex-direction: row;
  align-items: center;

  & > * {
    flex: auto 0 0;
  }
}

body {
  margin: 0;
  font-family: 'Signika Negative', sans-serif;
  background: @bg;
  font-size: 22px;
  user-select: none;
}

.top-bar {
  background: @primary;
  color: white;
  font-size: 42px;
  .h-box;
  padding: 12px;
  position: relative;
  z-index: 100;

  .player {
    flex: 100% 1 1;
    text-align: center;
    transition: all .3s;
  }

  .turn-counter {
    position: relative;
    width: 250px;

    .arrow {
      max-width: 250px;
      top: -72px;
      position: absolute;
      transition: transform 1.5s @ease-in-out;
    }

    .turn {
      color: @primary;
      text-align: center;
      position: relative;
      z-index: 1;
    }
  }

  &.player-0 {
    .turn-counter {
      .arrow {
        transform: rotate(180deg);
      }
    }

    .player.p1 {
      opacity: .75;
      transform: scale(.9);
    }
  }

  &.player-1 {
    .player.p0 {
      opacity: .75;
      transform: scale(.9);
    }
  }

  @media (max-width: 1200px) {
    font-size: 32px;

    .turn-counter {
      position: relative;
      width: 200px;

      .arrow {
        max-width: 200px;
        top: -58px;
      }
    }
  }
}

.world {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.castle {
  position: absolute;
  width: 760 * @world-ratio;
  height: 890 * @world-ratio;
  margin: 0 50 * @world-ratio;
  z-index: 10;
  top: 10vh;

  .building {
    max-width: 610 * @world-ratio;
    min-width: 610 * @world-ratio;
    position: absolute;
    bottom: 285 * @world-ratio;
    left: 75 * @world-ratio;
  }

  .ground {
    max-width: 760 * @world-ratio;
    min-width: 760 * @world-ratio;
    position: absolute;
    left: 0;
  }

  .banners {
    position: absolute;
    width: 65 * @world-ratio;
    height: 260 * @world-ratio;
    left: 100 * @world-ratio;
    bottom: 390 * @world-ratio;

    > * {
      position: absolute;
      top: 0;
    }

    .food-icon,
    .health-icon {
      z-index: 2;
      max-width: 30 * @world-ratio;
      min-width: 30 * @world-ratio;
    }

    .health-icon {
      left: 35 * @world-ratio;
    }

    .food-bar,
    .health-bar {
      max-width: 20 * @world-ratio;
      min-width: 20 * @world-ratio;
      margin-left: 5 * @world-ratio;
    }

    .health-bar {
      left: 35 * @world-ratio;
    }

    .stat-bubble {
      color: white;
      text-align: center;
      position: absolute;
      z-index: 10;
      font-size: 42px;
      display: block;
      width: 60px;
      height: 60px;
      transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);

      img {
        position: absolute;
        top: -46px;
        z-index: -1;
      }

      div {
        position: relative;
        top: -42px;
      }

      @media (max-width: 1200px) {
        transform: scale(.7);
      }

      @media (max-width: 950px) {
        transform: scale(.5);
      }
    }

    @position: calc(~"-70px - 30 * "@world-ratio);

    .food-bubble {
      left: @position;
      transform-origin: right top;

      img {
        left: 0;
      }
    }

    .health-bubble {
      right: @position;
      transform-origin: left top;

      img {
        right: 0;
      }
    }
  }

  &.player-0 {
    left: 0;

    .ground {
      bottom: -39 * @world-ratio;
    }
  }

  &.player-1 {
    right: 0;

    .ground {
      bottom: -70 * @world-ratio;
    }

    .banners {
      left: auto;
      right: 100 * @world-ratio;
    }
  }
}

.clouds {
  position: relative;
  z-index: 5;
}

.cloud {
  position: absolute;
}

.land {
  background: @land-color;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: calc(800 * @world-ratio);
}

.hand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 0;
  background: fade(black, 70%);
  background: linear-gradient(to bottom,  transparent 0%, fade(white, 40%) 100%);
  perspective: 1000px;
  pointer-events: none;

  .cards {
    @media (max-width: 1200px) {
      transform: scale(.7);
      height: 208px;
    }
  }
}

.can-play {
  .hand {
    pointer-events: all;
  }
}

.card {
  width: 200px;
  height: 260px;
  background: grey;
  color: white;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  position: relative;
  top: 0;
  margin: 0 6px;

  .title,
  .separator {
    flex: auto 0 0;
  }

  .title {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .separator {
    width: 155px;
    height: 13px;
    margin: auto;
  }

  .description {
    flex: auto 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;

    span {
      display: inline-block;
    }

    .keyword {
      img {
        opacity: .75;
        margin-left: -2px;
        width: 14px;
        height: 21px;
        vertical-align: sub;
      }
    }
  }

  .note {
    color: fade(white, 80%);
    font-size: 16px;
    font-style: italic;
  }

  &:hover {
    top: -20px;
  }

  &.type-attack {
    background: @card-attack;

    &:hover {
      background: lighten(@card-attack, 10%);
    }
  }

  &.type-special {
    background: @card-special;

    &:hover {
      background: lighten(@card-special, 10%);
    }
  }

  &.type-support {
    background: @card-support;

    &:hover {
      background: lighten(@card-support, 10%);
    }
  }
}

.overlay-background,
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.overlay-background {
  background: fade(white, 70%);
  z-index: 50;
}

.overlay {
  z-index: 51;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  text-align: center;

  .big {
    font-size: 72px;
  }

  .card {
    margin: 32px auto 0;
    pointer-events: none;
  }
}

.player-result {
  margin: 42px 0;
  padding: 32px;
  background: fade(white, 75%);

  &.victorious {
    span {
      color: @victorious;
    }
  }

  &.defeated {
    span {
      color: @defeated;
    }
  }
}
